<template>
    <div>
        <div style="color: green;border-radius: 5px;padding: 5px 10px;background-color: #f0f8ff">
            当节点状态变化时，您可以在此配置监听器做一些事情</div>
        <div>
            <div class="headerItme">
                <span style="width:150px; margin-right: 10px;">当流程进入本节点时</span>
                <el-button icon="el-icon-plus" type="text"
                    @click="insertMonitor(nowNode.props.monitors.startMonitors)">添加动作</el-button>
            </div>
            <div v-for="(item, index) in nowNode.props.monitors.startMonitors" :key="index">
                <monitor-setting v-model="nowNode.props.monitors.startMonitors[index]"
                    @deleteItem="deleteMonitor(nowNode.props.monitors.startMonitors, index)"></monitor-setting>
            </div>
        </div>
        <div>
            <div class="headerItme">
                <span style="width:150px; margin-right: 10px;">当流程离开本节点时</span>
                <el-button icon="el-icon-plus" type="text"
                    @click="insertMonitor(nowNode.props.monitors.endMonitors)">添加动作</el-button>
            </div>
            <div v-for="(item, index) in nowNode.props.monitors.endMonitors" :key="index">
                <monitor-setting v-model="nowNode.props.monitors.endMonitors[index]"
                    @deleteItem="deleteMonitor(nowNode.props.monitors.endMonitors, index)"></monitor-setting>
            </div>
        </div>
    </div>
</template>

<script>
import MonitorSetting from '../../../admin/layout/MonitorSetting.vue';
import { deepClone } from '../../../../utils/myUtil';
import MonitorSettingDefault from '../../../admin/layout/MonitorSettingDefault'
export default {
    name: "NodeMonitor",
    components: {
        MonitorSetting
    },
    computed: {
        nowNode() {
            return this.$store.state.selectedNode
        },
    },
    methods: {
        //插入监听数据
        insertMonitor(monitors) {
            monitors.push(deepClone(MonitorSettingDefault.ROOT_MONITOR_SETTING_DEFAULT))
        },
        //删除监听数据
        deleteMonitor(monitors, index) {
            monitors.splice(index, 1)
        },
    }
}
</script>

<style scoped>
.headerItme {
    align-items: center;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
}
</style>